\chapter{Projekt - Sposoby prezentacji losowania}
\label{cha:sposobyPrezentacji}

Użytkownik podczas tworzenia wydarzenia może wybrać preferowany sposób
prezentacji przebiegu losowania. Gdy nastąpi godzina uruchomienia wydarzenia
system przeprowadza konkurs komunikując się na bieżąco z warstwą
prezentacji stopniowo wizualizując postęp użytkownikom.

\section{Wizualizacje}

Warstwa prezentacji zawiera następujące metody wizualizacji przebiegu konkursu:

\begin{itemize}
  \item Wyścig
  \item Słupki
  \item Liczby
  \item Ruletka
  \item Turniej
\end{itemize}

%todo - obrazki

\subsection{Wyścig}
Wyścig przedstawiony na Rys. \ref{fig:prezentacjaWyscig} polega na przedstawieniu
osób biorących w konkursie w postaci uczestników wyścigu samochodowego. W
przypadku dużej liczby osób wyświetlani są tylko Ci, którzy są na czele stawki.
GUI okresowo dostaje informacje o aktualnym procencie ukończonej trasy każdego
uczestnika.

\begin{figure}[ht!]
\begin{center}
\includegraphics[scale=0.6]{prez_wyscig}
\caption{Wyścig}
\label{fig:prezentacjaWyscig}
\end{center}
\end{figure}

\subsection{Słupki}
Słupki przedstawione na Rys. \ref{fig:prezentacjaSlupki} są wizualizacją podobną do
wyścigu, lecz jest to przedstawienie uczestników na zasadzie diagramu słupkowego.

\begin{figure}[ht!]
\begin{center}
\includegraphics[scale=0.6]{prez_slupki}
\caption{Słupki}
\label{fig:prezentacjaSlupki}
\end{center}
\end{figure}

\subsection{Liczby}

Liczby przedstawione na Rys. \ref{fig:prezentacjaLiczby} polegają na wybraniu z
góry ustalonej losowej liczby. Następnie każdy użytkownik okresowo otrzymuje
wartość akumulowaą do swojego wyniku. Wygrywa jeśli jego suma zrówna się
ustalonej liczbie, jeżeli zaś maksimum zostanie przekroczone suma jest
akumulowana od nowa.

\begin{figure}[ht!]
\begin{center}
\includegraphics[scale=0.6]{prez_liczby}
\caption{Liczby}
\label{fig:prezentacjaLiczby}
\end{center}
\end{figure}

\subsection{Ruletka}
Ruletka przedstawiony na Rys. \ref{fig:prezentacjaRuletka} jest wizualizacją
polegającą na prezentacji uczestników w postaci diagramu kołowego i kursora zmierzającego wokół niego. W pewnym momencie kursor
się zatrzymuje i wyłaniany jest wygrany.

\begin{figure}[ht!]
\begin{center}
\includegraphics[scale=0.6]{prez_ruletka}
\caption{Ruletka}
\label{fig:prezentacjaRuletka}
\end{center}
\end{figure}
%TODO - zrobic tu wycinek normalnie z painta. 

\subsection{Turniej}
Turniej przedstawiony na Rys. \ref{fig:prezentacjaTurniej} polega na podziale osób w
odpowiednie grupy, a następnie prezentacji zwycięzców każdej fazy i łączeniu ich w kolejne grupy.

%TODO - zrobic tu wycinek z painta kwadratow, ktore sie dzielą

\begin{figure}[ht!]
\begin{center}
\includegraphics[scale=0.6]{prez_tournament} 
\caption{Turniej}
\label{fig:prezentacjaTurniej}
\end{center}
\end{figure} 

\section{Komunikacja z GUI}
System w postaci serwisu www komunikuje się z GUI przekazując co pewien
okres czasu odpowiednie stany postępu losowania oglądającym. Do serwisu
przesyłane jest żądanie zawierające znacznik czasowy ostatniej zmiany algorytmu.
Następnie serwis przy zmianie stanu algorytmu przekazuje odpowiedź z nowym
znacznikiem czasowym.
%TODO - samplowy json
\subsection{Long polling}


Long polling pozwala zoptymalizować wysyłanie informacji do klienta.
Klient żąda informacji z~serwera w sposób podobny do normalnego żądania.
Jednakże, jeżeli serwer nie posiada żadnych informacji dostępnych dla klienta, zamiast wysyłać puste odpowiedzi,
 czeka aż informacje staną się dostępne. Kiedy informacja jest możliwa do
 udostępnienia kompletna odpowiedź jest wysyłana. Klient natychmiast
 ponownie wysyła żądanie do serwera o nowe informacje. W ten sposób serwer może
 odpowiedzieć praktycznie od razu po ich otrzymaniu\cite{longPolling}. Ideę long pollingu zaprezentowano na rysunku Rys. \ref{fig:longPolling}.

\begin{figure}[ht!]
\includegraphics[scale=0.6]{longPolling}
\caption{Long polling}
\label{fig:longPolling}
\end{figure}

System wykorzystuje technikę long polling'u w celu optymalizacji zapytań po
stronie serwera jak i~klienta unikając redundantnych żądań i odpowiedzi.
\subsection{Dalszy rozwój w WebGL}

Istnieje możliwość rozwinięcia wizualizacji do postaci 3d. W tym celu
może zostać użyta technologia WebGL, która potrafi wykorzystać moc karty
graficznej i stworzyć treści trójwymiarowe bez konieczności instalowania
dodatkowego oprogramowania.


\subsubsection{Możliwości WebGL}

WebGL bazuje na OpenGL ES w wersji 2.0 i dostarcza programistom interfejs grafiki 3D. Korzysta 
z występującego w HTML 5 elementu Canvas i daje dostęp do modelu DOM.
Aktualnie zaimplementowane jest w przeglądarkach Mozilla Firefox, Google Chrome i Apple Safari
 oraz Opera i~Internet Explorer od wersji 11.
Do rysowania grafiki za pomocą GPU wymagają urządzeń z kartami graficznymi wspierającymi minimalnie
 OpenGL 2.0 lub OpenGL ES 2.0. W przypadku braku zgodnej karty graficznej w przeglądarkach Google Chrome
  i Internet Explorer 11 możliwe jest rysowanie grafiki
  programowalnej\cite{webGL}.

\subsubsection{Problemy z WebGL}

W maju 2011 niemiecka grupa Context Information Security opublikowała artykuł
opisujący wiele podatności związanych z bezpieczeństwem WebGL oraz jego implementacji w
 przeglądarkach Mozilla Firefox oraz Google Chrome. Przykładowe ataki obejmują zawieszenie komputera 
 oraz wykonanie i~przesłanie przez sieć Internet zrzutu ekranu użytkownika. W
 kolejnych tygodniach, zagrożenia wynikające z użycia WebGL potwierdził US-CERT oraz
 Microsoft\cite{webGL}.
 Dodatkowym problemem jest domyślnie wyłączona obsługa WebGL w takich
 przeglądarkach jak np. Mozilla Firefox. Należałoby poinstruować użytkownika
 w jaki sposób odblokować tę możliwość, co może okazać się dla
 niego problematyczne.





